<template>
  <div class="json-tool">
    <!-- ... 其他内容保持不变 ... -->
    <div class="tool-content">
      <div class="container">
        <div class="conversion-panel">
          <div class="input-section">
            <textarea 
              v-model="jsonInput"
              class="custom-input"
              placeholder="请输入 JSON 字符串..."
              rows="10"
            ></textarea>
            <div class="message-group">
              <span v-if="validateSuccess" class="success-message">
                <i class="fas fa-check-circle"></i>
                JSON 格式有效
              </span>
              <span v-if="copySuccess" class="success-message">
                <i class="fas fa-check-circle"></i>
                已复制到剪贴板
              </span>
            </div>
            <div class="button-group">
              <button 
                class="action-btn" 
                @click="validateJson"
                :class="{ success: validateSuccess }"
                :disabled="validateSuccess"
              >
                <i class="fas" :class="validateSuccess ? 'fa-check' : 'fa-check-circle'"></i>
                {{ validateSuccess ? '验证成功' : '验证JSON' }}
              </button>
              <button 
                class="action-btn" 
                @click="copyJson"
                :class="{ success: copySuccess }"
                :disabled="copySuccess"
              >
                <i class="fas" :class="copySuccess ? 'fa-check' : 'fa-copy'"></i>
                {{ copySuccess ? '复制成功' : '复制JSON' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Breadcrumb from '@/components/Breadcrumb.vue'

const jsonInput = ref('')
const validateSuccess = ref(false)
const copySuccess = ref(false)

const validateJson = () => {
  try {
    JSON.parse(jsonInput.value)
    validateSuccess.value = true
    setTimeout(() => {
      validateSuccess.value = false
    }, 3000)
  } catch (error) {
    jsonInput.value = '无效的 JSON 格式'
  }
}

const copyJson = async () => {
  try {
    await navigator.clipboard.writeText(jsonInput.value)
    copySuccess.value = true
    setTimeout(() => {
      copySuccess.value = false
    }, 3000)
  } catch (error) {
    console.error('复制失败:', error)
  }
}
</script>

<style scoped lang="scss">
.json-tool {
  // ... 其他样式保持不变 ...

  .message-group {
    margin: 10px 0;
    min-height: 24px;
    display: flex;
    gap: 15px;

    .success-message {
      color: #4CAF50;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
      animation: fadeIn 0.3s ease;

      i {
        font-size: 1rem;
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .button-group {
    display: flex;
    gap: 15px;
    margin-top: 20px;

    .action-btn {
      min-width: 100px;
      padding: 10px 20px;
      border: none;
      background: var(--primary-color);
      color: white;
      border-radius: 6px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      i {
        font-size: 0.9rem;
      }

      &:hover:not(:disabled) {
        background: var(--hover-color);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transform: translateY(-2px);
      }

      &:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }

      &.success {
        background: #4CAF50;
        cursor: default;

        &:hover {
          transform: none;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
      }

      &:disabled {
        opacity: 1;
      }
    }
  }
}
</style> 